<template>
  <div class="shopInfo_container">
    <div class="shopInfo_container__top">
      <div class="shopInfo_container__top__leftTitle">
        <el-icon class="shopInfo_container__top__leftTitle__icon"
          ><DataLine
        /></el-icon>
        <span>店铺信息</span>
      </div>
      <div class="shopInfo_container__top__rightOption">[退出]</div>
    </div>
    <el-divider />
    <div class="shopInfo_container__bottom">
      <div class="shopInfo_container__bottom__topIpt">
        <div class="shopInfo_container__bottom__topIpt__left">
          <el-form :model="form" label-width="120px">
            <el-form-item label="店铺名称">
              <el-input v-model="form.name" placeholder="请输入店铺名称" />
            </el-form-item>
            <el-form-item label="店铺类型">
              <el-select v-model="form.region" placeholder="请选择店铺类型">
                <el-option label="餐饮" value="food" />
                <el-option label="商超便利" value="market" />
                <el-option label="鲜花" value="flower" />
                <el-option label="休闲便利" value="convenient" />
              </el-select>
            </el-form-item>
            <el-form-item label="营业时间">
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>

            <el-form-item label="店铺地址">
              <el-input v-model="form.address" placeholder="请输入店铺地址" />
            </el-form-item>
            <el-form-item label="店铺名称">
              <el-input v-model="form.phone" placeholder="请输入店铺电话" />
            </el-form-item>
            <el-form-item label="店铺简介">
              <el-input
                v-model="form.desc"
                type="textarea"
                placeholder="请输入店铺简介,控制在500字内"
                maxlength="1000"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="shopInfo_container__bottom__topIpt__right">
          <div class="shopInfo_container__bottom__topIpt__right__shopLogo">
            <h3>选择店铺图片</h3>
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-success="upLoadHandler"
              :show-file-list="false"
              :on-error="failUpload"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                拖拽到该区域 or <em>点击此处以上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  <img
                    v-if="shopLogoUrl"
                    :src="shopLogoUrl"
                    alt="XXX"
                    :title="shopLogoMsg"
                  />
                </div>
              </template>
            </el-upload>
          </div>
          <div class="shopInfo_container__bottom__topIpt__right__shopImg"></div>
        </div>
      </div>
      <div class="shopInfo_container__bottom__bottomBtn">
        <el-button type="info">取消</el-button>
        <el-button color="#626aef" :dark="true">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { DataLine, UploadFilled } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { ElMessage } from "element-plus";

const value2 = ref("");
const shopLogoUrl = ref("");
const shopLogoMsg = ref("");
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  desc: "",
  address: "",
  phone: "",
});
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const failUpload = () => {
  ElMessage({
    message: "上传失败,请更换文件后重试",
    type: "error",
  });
};
const upLoadHandler = (a, b, c) => {
  shopLogoUrl.value = URL.createObjectURL(b.raw);
  shopLogoMsg.value = b.name;
  if (a === "OK") {
    ElNotification.success({
      title: "Success",
      message: "文件上传成功!",
      offset: 100,
      showClose: false,
    });
  }
  // console.log(b);
  // console.log(c);
};
</script>
<style lang="scss" scoped>
.shopInfo_container {
  width: 95%;
  height: 800px;
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 10px;
  box-sizing: border-box;
  &__top {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    &__leftTitle {
      display: flex;
      align-items: center;
      &__icon {
        color: #68bbc4;
      }
      & span {
        margin-left: 10px;
      }
    }
  }
  &__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    &__topIpt {
      display: flex;
      justify-content: space-around;
      &__left {
        width: 42%;
      }
      &__right {
        width: 42%;
        &__shopLogo {
          display: flex;
          align-items: center;
          & h3 {
            width: 20px;
            height: 150px;
            margin: 0 10px;
          }
          & .upload-demo {
            flex-grow: 1;
          }
          img {
            width: 50px;
            height: 50px;
          }
        }
      }
    }
    &__bottomBtn {
      margin-top: 50px;
      display: flex;
      justify-content: center;
      & button {
        width: 100px;
        margin: 0 50px;
      }
    }
  }
}
</style>
